利用Margin置中

　　當物件設定abosolute之後，預設它是抓不到整體可運用空間的範圍，所以 margin: auto 此時會失效，但當你設定了 top: 0; bottom: 0 時，絕對定位物件就抓到可運用的空間了，這時你的 margin: auto 就生效了，如果你的絕對定位物件需要水平置中於父層，那你同樣可以設定 left: 0; right: 0; 來讓絕對定位物件取得空間可運用範圍，再讓 margin-left 與 margin-right 設定為 auto 即可置中。但此方式的缺點是你的定位物件必須有固定的寬高（％數也可）才能正常置中。

CSS:

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  position: relative;
}
.content{
  position: absolute;
  background: #ccc;
  height: 70px;
  width: 200px;
*   top: 0;
*   right: 0;
*   bottom: 0;
*   left: 0;
*   margin: auto;
}

在Position設定為relative或abosolute時使用transform置中

　　此方式應該算是最方便的了，因為此置中的定位物件不需要固定的寬跟高，我們利用絕對定位時的 left 跟 top 設定物件的上方跟左方各都為 50% ，再利用 translate(-50%, -50%) 位移置中物件自身寬與高的 50% 就能達成置中的目的了。我們使用 translate(-50%,-50%)的意思是，讓物件的X軸移動-50%，此50%是以物件本身的寬度作為100%來做計算，所以不管你的物件寬度是多少，他都會自動跑負一半的位置，relative與abosolute最大的差別就是relative會以他原本的位置來做調整，abosolute則是以父元素來做調整。

CSS:

.box {
  width: 500px;
  height: 250px;
  border: 3px solid green;
  position: relative;
}

.content {
  position: absolute;
  width: 200px;
  background: #000;
  height: 70px;
*   top: 50%;
*   left: 50%;
*   transform: translate(-50%, -50%);
}

設定為Flex後利用align-item與justify-content來置中

　　這個方式的優點是此層不需設定高度即可自動置中，我們只要設定父層 display: flex 以及設定次軸置中屬性 align-items: center就好了，我們可以利align-items這個屬性來設定該子層資料垂直於「行」方向的位置，簡單的說，倘若資料預設是橫排(X軸)，那麼 align-items 就是直排(Y軸)的方向，但是倘若資料是直排(Y軸)的話，那麼 align-items 控制的就是橫排(X軸)的方向
　　同樣的，justify-content是用來設定主軸的置中屬性，跟align-items完全相反的地方是他預設控制的地方為(X軸)物件的位置，當資料預設為直排的時候，他則是控制(Y軸)物件的位置

CSS:

.box {
  width: 500px;
  height: 250px;
  border: 3px solid yellow;
*   display: flex;
*   align-items: center;
*   justify-content: center;
}

.content {
  width: 100px;
  height: 100px;
  background: thistle;
  margin: 10px;
}

text-align與Line-Height

　　設定Line-height(行高)是垂直置中最簡單的方式，適用於「單行」的「行內元素」，若將 line-height 設成和高度一樣的數值，則內容的行內元素就會被垂直置中，因為是行高，所以會在行內元素的上下都加上行高的 1/2，所以就垂直置中了！不過由此就可以看出，為什麼必須要單行的行內元素，因為如果多行，第二行與第一行的間距會變超大，就不是我們所期望的效果了。
　　如果是單行的「行內元素」，有時候我們也會需要設定水平置中，那就會使用到text-align:center的這個語法，這個語法非常的單純，不管有幾行都一樣會做水平置中的動作，不用考慮到像是設定Line-Height的時候會出現的多行問題。

CSS:

.content {
  font-size: 24px;
  color: #fff;
  background-color: #00aa00;
  width: 500px;
  height: 250px;
*   text-align: center;
*   line-height: 250px;
}

參考文章:

oxxoStudio:垂直置中的三個方法

CSScoke